<template>
    <div id="app">
        {{message}}
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>
</template>

<script>
    import TodoItem from './components/Todoitem.vue'

    export default {
        name: 'app',
        data() {
            return {
                groceryList: [
                    {id: 0, text: "蔬菜"},
                    {id: 1, text: "水果"},
                    {id: 2, text: "食品"},
                ]
            }
        },
        components: {
            TodoItem
        }
    }
</script>

